import React, { useState, useRef } from 'react'
//rfc
export default function Comstate() {
  const [name, setName] = useState<string>('chuck')
  const [list, setList] = useState<string[]>([])
  const inputRef = useRef<HTMLInputElement>(null) 
  const inputchange = () => {
    console.log((inputRef.current as HTMLInputElement).value)
  }
  return (
    <div>
      <div>name: {name}</div>
      <input ref={inputRef} onChange={inputchange}/>
      <button onClick={() => {
        setList([(inputRef.current as HTMLInputElement).value, ...list])
      }}>edit Name</button>

      <ul>
       {list.map((item)=>{
          return <li key={item}>{item}</li>
       })}
      </ul>
    </div>

  )
}
